<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: #6ff;
            overflow: hidden;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: grey;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>按键修饰符</h3>
        <div>
            <p>所有按键:</p>
            <input type="text" @keyup="keyUpHandler">
        </div>
        <div>
            <p>enter键触发:</p>
            <input type="text" @keyup.enter="keyUpHandler">
        </div>
        <div>
            <p>c键触发:</p>
            <input type="text" @keyup.c="keyUpHandler">
        </div>
        <div>
            <p>c键触发:</p>
            <input type="text" @keyup.page-down="keyUpHandler">
        </div>
        <div>
            <p>方向键触发:</p>
            <input type="text" @keyup.left.right.up.down="keyUpHandler">
        </div>

        <div>
            <p>enter键触发:</p>
            <input type="text" @keyup.13="keyUpHandler">
        </div>

        <h3>系统修饰符</h3>
        <div>
            <p>.ctrl按键:</p>
            <input type="text" @keyup.ctrl="keyUpHandler">
        </div>
        <div>
            <p>.alt按键:</p>
            <input type="text" @keyup.alt="keyUpHandler">
        </div>
        <div>
            <p>.shift按键:</p>
            <input type="text" @keyup.shift="keyUpHandler">
        </div>
        <div>
            <p>.meta按键:</p>
            <input type="text" @keyup.meta="keyUpHandler">
        </div>
        <div>
            <p>.ctrl.enter按键:</p>
            <input type="text" @keyup.ctrl.enter="keyUpHandler">
        </div>
        <hr>
        <div>
            <!--没有.exact限制  ctrl 可以配合其他按键修饰符 .alt等 -->
            <p>.ctrl按键:</p>
            <input type="text" @keyup.ctrl="keyUpHandler">
        </div>
        <div>
            <!--有.exact限制  ctrl 可以不能配合其他按键修饰符 .alt等 -->
            <p>.ctrl.exact按键:</p>
            <input type="text" @keyup.ctrl.exact="keyUpHandler">
        </div>
    </div>
</body>
<script>

    // 指令用法1:
    // v-指令名="指令值"   例如: v-html="html"

    // 指令用法2:
    // 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
    // v-指令名:参数="指令值"   例如: v-on:click="a++"

    // v-指令名:参数.修饰符="指令值"   例如: v-on:click.stop="a++"
    // v-指令名:参数.修饰符1.修饰符2="指令值"   例如: v-on:click.stop="a++"


    // 事件修饰符:
    // .prevent  阻止浏览器的默认行为
    // .stop    阻止事件冒泡
    // .capture  事件捕获形式触发事件
    // .self     触发事件的元素必须是元素本身
    // .once     事件只能触发一次
    // .passive   滚动事件的默认行为 (即滚动行为) 将会立即触发(.passive 修饰符尤其能够提升移动端的性能。)

    // 按键修饰符 (只有对应的按键才能触发事件)
    // 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v - on 在监听键盘事件时添加按键修饰符：
    // .enter
    // .tab
    // .delete(捕获“删除”和“退格”键)
    // .esc
    // .space
    // .up
    // .down
    // .left
    // .right


    // 系统修饰符  (事件触发时 必须先按下系统修饰符)
    // .ctrl
    // .alt
    // .shift
    // .meta

    // .exact 修饰符


    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            keyUpHandler(e) {
                console.log(e.ctrlKey, e.altKey);
                console.log("按键松开", e.key);
            }
        },

    })



</script>

</html>